<template>
  <div style="margin-top: 16px">
    <div class="search">
      <div class="searchForm">
        <a-form layout="inline" :form="form" @submit="handleSearch">
          <a-row :gutter="24">
            <a-col :span="8">
              <a-form-item :label="`商品编号`">
                <a-input placeholder="请输入商品编号" v-decorator="['prdNo']" :style="{width:'200px'}"/>
              </a-form-item>
            </a-col>

            <a-col :span="8">
              <a-form-item :label="`商品名称`">
                <a-input placeholder="请输入商品名称" v-decorator="['prdName']" :style="{width:'200px'}"/>
              </a-form-item>
            </a-col>

            <a-col :span="8">
              <a-form-item :label="`商品类型`">
                <a-select v-decorator="['prdType']" placeholder="请选择商品类型" :style="{width:'200px'}">
                  <a-select-option value="00">
                    全部
                  </a-select-option>
                  <a-select-option value="01">
                    普通商品
                  </a-select-option>
                  <a-select-option value="02">
                    代销商品
                  </a-select-option>
                  <a-select-option value="03">
                    虚拟商品
                  </a-select-option>
                  <a-select-option value="04">
                    闪购商品
                  </a-select-option>
                </a-select>
              </a-form-item>
            </a-col>

            <a-col :span="8">
              <a-form-item :label="`商品类目`">
                <a-input placeholder="请输入商品类目" v-decorator="[`prdClass`]" :style="{width:'200px'}"/>
              </a-form-item>
            </a-col>

            <a-col :span="8">
              <a-form-item :label="`是否预售`">
                <a-select v-decorator="['isPresell']" placeholder="请选择是否预售" :style="{width:'200px'}">
                  <a-select-option value="00">
                    全部
                  </a-select-option>
                  <a-select-option value="01">
                    非预售
                  </a-select-option>
                  <a-select-option value="02">
                    预售
                  </a-select-option>
                </a-select>
              </a-form-item>
            </a-col>

            <a-col :span="8">
              <a-form-item :label="`创建时间`">
                <a-range-picker v-decorator="['createTime']" :style="{width:'200px'}"/>
              </a-form-item>
            </a-col>

            <a-col :span="8">
              <a-form-item :label="`支付方式`">
                <a-select v-decorator="['payType']" placeholder="请选择支付方式" :style="{width:'200px'}">
                  <a-select-option value="00">
                    全部
                  </a-select-option>
                  <a-select-option value="01">
                    货到付款
                  </a-select-option>
                  <a-select-option value="02">
                    在线支付
                  </a-select-option>
                  <a-select-option value="03">
                    货到付款&在线支付
                  </a-select-option>
                </a-select>
              </a-form-item>
            </a-col>

            <a-col :span="8">
              <a-form-item :label="`频道展示`">
                <a-select v-decorator="['isChannelShow']" placeholder="请选择频道展示" :style="{width:'200px'}">
                  <a-select-option value="00">
                    全部
                  </a-select-option>
                  <a-select-option value="01">
                    是
                  </a-select-option>
                  <a-select-option value="02">
                    否
                  </a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
          </a-row>
        </a-form>
      </div>
      <div class="searchBtn">
        <a-button :style="{marginTop:'20px'}" type="primary" @click="handleSearch">
          查询
        </a-button>
        <br/>
        <a-button :style="{marginTop:'20px'}" @click="handleReset">
          重置
        </a-button>
      </div>
    </div>
    <div class="tableTool">
      <a-button type="primary" :style="{ marginLeft: '8px' }" @click="handleAddPrd">
        新建商品
      </a-button>
    </div>
    <a-table
      size="small"
      :columns="columns"
      :data-source="data"
      :pagination="{ pageSize: 10,total:total}"
      :style="{marginTop:'15px',float:'left',width:'100%'}"
      @change="tableChange">
      <template slot="prdPrice" slot-scope="text,record">
        ￥ {{ record.prdPrice }}
      </template>
      <template slot="prdInfo" slot-scope="text, record">
        <div style="width: 200px">
          <div style="width: 50px;float: left">
            <img :src="url + `/file/` + record.prdImgCover " style="width:50px">
          </div>
          <div style="width: 150px;float: right;padding-left: 20px">
            <h3>{{ record.prdName }}</h3>
            <h5>{{ record.prdSubName }}</h5>
          </div>
        </div>
      </template>
      <template slot="prdStatus" slot-scope="text,record">
        <span v-if="record.prdStatus == '1'">售卖中</span>
        <span v-if="record.prdStatus == '2'">已下架</span>
        <span v-if="record.prdStatus == '3'">禁封中</span>
      </template>
      <template slot="action" slot-scope="text,record,index">
        <a-dropdown>
          <a class="ant-dropdown-link" @click="e => e.preventDefault()"> 操作 <DownOutlined /> </a>
          <template #overlay>
            <a-menu>
              <a-menu-item>
                <a @click="comeback(record,index)">恢复</a>
              </a-menu-item>
            </a-menu>
          </template>
        </a-dropdown>
      </template>
    </a-table>
  </div>
</template>

<script>
  import { queryPrd, updatePrd } from '@/api/prd'

  const columns = [
    {
      title: '商品信息',
      key: 'prdName',
      scopedSlots: { customRender: 'prdInfo' }
    },
    {
      title: '售价(元)',
      key: 'prdPrice',
      scopedSlots: { customRender: 'prdPrice' }
    },
    {
      title: '总库存',
      dataIndex: 'prdCount',
      key: 'prdCount'
    },
    {
      title: '销量',
      key: 'prdSaleCount',
      dataIndex: 'prdSaleCount'
    },
    {
      title: '创建时间',
      key: 'createTime',
      dataIndex: 'createTime'
    },
    {
      title: '销售状态',
      key: 'prdStatus',
      scopedSlots: { customRender: 'prdStatus' }
    },
    {
      title: '操作',
      key: 'action',
      scopedSlots: { customRender: 'action' }
    }
  ]

  export default {
    name: 'ManageProductRecycle',
    data () {
      return {
        url: process.env.VUE_APP_API_BASE_URL,
        form: this.$form.createForm(this, { name: 'product_online_search' }),
        columns: columns,
        data: [],
        total: 0
      }
    },
    methods: {
      handleSearch () {
        this.form.validateFields((err, values) => {
          if (!err) {
            if (values.createTime && values.createTime.length > 0) {
              values.createTimeStart = values.createTime[0].format('YYYY-MM-DD')
            }
            if (values.createTime && values.createTime.length > 1) {
              values.createTimeEnd = values.createTime[1].format('YYYY-MM-DD')
            }
            values.isRecycle = '01'
            queryPrd(values).then(rsp => {
              this.total = rsp['total']
              this.data = rsp['data']
            })
          }
        })
      },
      handleReset () {
        this.form.resetFields()
      },
      tableChange (pagination) {
        this.form.validateFields((err, values) => {
          if (!err) {
            if (values.createTime && values.createTime.length > 0) {
              values.createTimeStart = values.createTime[0].format('YYYY-MM-DD')
            }
            if (values.createTime && values.createTime.length > 1) {
              values.createTimeEnd = values.createTime[1].format('YYYY-MM-DD')
            }
            values.isRecycle = '01'
            values.pageNumb = pagination.current

            queryPrd(values).then(rsp => {
              this.total = rsp['total']
              this.data = rsp['data']
            })
          }
        })
      },
      comeback (prd, index) {
          updatePrd({ prdNo: prd.prdNo, isRecycle: '02' }).then(rsp => {
            this.data.splice(index, 1)
          })
      },
      handleAddPrd () {
        this.$router.push({ path: '/product/createProduct' })
      }
    },
    mounted () {
      this.handleSearch()
    }
  }
</script>

<style scoped>
  .search {
    width: 100%;
  }

  .searchForm {
    float: left;
    width: 92%;
  }

  .searchBtn {
    border-left: 1px solid #edeff2;
    float: right;
    width: 8%;
    height: 120px;
    padding-left: 20px;
  }

  .tableTool {
    float: right;
    padding-top: 15px;
  }
</style>
